<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自动改变方向——幻灯片效果</title>
    <style>
    body,
    div,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style-type: none;
    }
    
    body {
        background: #000;
        text-align: center;
        font: 12px/20px Arial;
    }
    
    #box {
        position: relative;
        width: 492px;
        height: 172px;
        background: #fff;
        border-radius: 5px;
        border: 8px solid #fff;
        margin: 10px auto;
    }
    
    #box .list {
        position: relative;
        width: 490px;
        height: 170px;
        overflow: hidden;
        border: 1px solid #ccc;
    }
    
    #box .list li {
        position: absolute;
        top: 0;
        left: 0;
        width: 490px;
        height: 170px;
        opacity: 0;
        filter: alpha(opacity=0);
    }
    
    #box .list li.current {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    
    #box .count {
        position: absolute;
        right: 0;
        bottom: 5px;
    }
    
    #box .count li {
        color: #fff;
        float: left;
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-right: 5px;
        overflow: hidden;
        background: #F90;
        opacity: 0.7;
        filter: alpha(opacity=70);
        border-radius: 20px;
    }
    
    #box .count li.current {
        color: #fff;
        opacity: 1;
        filter: alpha(opacity=100);
        font-weight: 700;
        background: #f60;
    }
    
    #tmp {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var oBox = document.getElementById("box");
        var aUl = document.getElementsByTagName("ul");
        var aImg = aUl[0].getElementsByTagName("li");
        var aNum = aUl[1].getElementsByTagName("li");
        var timer = play = null;
        var i = index = 0;
        var bOrder = true;

        //切换按钮
        for (i = 0; i < aNum.length; i++) {
            aNum[i].index = i;
            aNum[i].onmouseover = function() {
                show(this.index)
            }
        }

        //鼠标划过关闭定时器
        oBox.onmouseover = function() {
            clearInterval(play)
        };

        //鼠标离开启动自动播放
        oBox.onmouseout = function() {
            autoPlay()
        };

        //自动播放函数
        function autoPlay() {
            play = setInterval(function() {
                //判断播放顺序
                bOrder ? index++ : index--;

                //正序
                index >= aImg.length && (index = aImg.length - 2, bOrder = false);

                //倒序
                index <= 0 && (index = 0, bOrder = true);

                //调用函数
                show(index)
            }, 2000);
        }
        autoPlay(); //应用

        //图片切换, 淡入淡出效果
        function show(a) {
            index = a;
            var alpha = 0;
            for (i = 0; i < aNum.length; i++) aNum[i].className = "";
            aNum[index].className = "current";
            clearInterval(timer);

            for (i = 0; i < aImg.length; i++) {
                aImg[i].style.opacity = 0;
                aImg[i].style.filter = "alpha(opacity=0)";
            }

            timer = setInterval(function() {
                alpha += 2;
                alpha > 100 && (alpha = 100);
                aImg[index].style.opacity = alpha / 100;
                aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
                alpha == 100 && clearInterval(timer)
            }, 20);
        }
    };
    </script>
</head>

<body>
    <div id="box">
        <ul class="list">
            <li class="current"><img src="../../../src/images/01.jpg" width="490" height="170" /></li>
            <li><img src="../../../src/images/02.jpg" width="490" height="170" /></li>
            <li><img src="../../../src/images/03.jpg" width="490" height="170" /></li>
            <li><img src="../../../src/images/04.jpg" width="490" height="170" /></li>
            <li><img src="../../../src/images/05.jpg" width="490" height="170" /></li>
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

</html>
